<template>
    <div class="main-container">
        <div class="title">
            <h2>首頁配置</h2>
        </div>
        <el-form ref="form" :model="form" label-width="80px">
            <h3>按鈕配置</h3>
            <el-form-item label="按鈕1:">
                <el-input v-model="form.button1Name"></el-input>
            </el-form-item>
            <el-form-item label="跳轉鏈接1:">
                <el-input v-model="form.button1Url"></el-input>
            </el-form-item>
            <el-form-item label="按鈕2:">
                <el-input v-model="form.button2Name"></el-input>
            </el-form-item>
            <el-form-item label="跳轉鏈接2:">
                <el-input v-model="form.button2Url"></el-input>
            </el-form-item>
            <h3>關於信息</h3>
            <el-form-item label="關於內容:">
                <el-input type="textarea" :rows="4" v-model="form.aboutUs"></el-input>
            </el-form-item>
            <h3>橫幅配置</h3>
            <el-form-item label="橫幅標題:">
                <el-input v-model="form.bannerTitle"></el-input>
            </el-form-item>
            <el-form-item label="按鈕標題:">
                <el-input v-model="form.bannerButton"></el-input>
            </el-form-item>
            <el-form-item label="跳轉鏈接3:">
                <el-input v-model="form.bannerUrl"></el-input>
            </el-form-item>
            <h3>聯繫信息</h3>
            <el-form-item label="聯繫內容:">
                <el-input type="textarea" :rows="4" v-model="form.contact"></el-input>
            </el-form-item>
            <el-form-item label="電話1:">
                <el-input v-model="phone1"></el-input>
            </el-form-item>
            <el-form-item label="電話2:">
                <el-input v-model="phone2"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="saveSettings">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import ueditor from '../components/ueditor.vue';
export default {
    components: {
        ueditor
    },
    mounted() {
        this.init();
    },
    data() {
        return {
            form: {
                button1Name: '',
                button1Url: '',
                button2Name: '',
                button2Url: '',
                aboutUs: '',
                bannerTitle: '',
                bannerButton: '',
                bannerImage: '',
                bannerUrl: '',
                contact: '',
                phones: ''
            },
            phone1: '',
            phone2: ''
        };
    },
    methods: {
        init() {
            $.request('/homepage/getHomePageInfo.do').then(res => {
                Object.assign(this.form, res.data);
                let phones = res.data.phones.split(',');
                this.phone1 = phones[0] || '';
                this.phone2 = phones[1] || '';
            });
        },
        saveSettings() {
            this.form.phones = this.phone1 + ',' + this.phone2;
            $.request('/homepage/setHomePageInfo.do', {
                data: this.form,
                method: 'post'
            }).then(res => {
                this.$message('保存成功！');
            });
        }
    }
}
</script>
<style lang="less">
</style>
